import React, { Component } from 'react'
import PubSub from 'pubsub-js'
import context from '../../context'
import './Item.css'
export default class Item extends Component {
  state = {
    tN: '',
  }
  updateHandle = (e) => {
    // console.log(e.target.checked)
    // 要将id传递给App
    // this.props.todo.id
    // this.props.updateTodo(this.props.todo.id)
    PubSub.publish('update', this.props.todo.id)
  }

  delHandle = () => {
    this.props.delTodo(this.props.todo.id)
  }
  render() {
    const { tN } = this.state
    const {
      todo: { todoName, id, isDone },
      //由于名字重复,所有重命名为editId
      updateEditId,
      editTodoName,
    } = this.props
    return (
      <context.Consumer>
        {(editId) => {
          return (
            <li>
              {editId !== id ? (
                <label>
                  <input
                    type="checkbox"
                    checked={isDone}
                    onChange={this.updateHandle}
                  />
                  <span className={isDone ? 'done' : ''}>{todoName}</span>
                </label>
              ) : (
                <input
                  type="text"
                  className="editInp"
                  // 文本框中展示什么数据,有状态tN决定
                  value={this.state.tN}
                  // 让用户可以在文本框中正常输入数据
                  onChange={(e) => {
                    this.setState({
                      tN: e.target.value.trim(),
                    })
                  }}
                  onKeyDown={(e) => {
                    if (e.key !== 'Enter' || !tN) return
                    editTodoName(tN)
                  }}
                />
              )}
              <button className="btn btn-danger" onClick={this.delHandle}>
                删除
              </button>
              <button
                className="btn btn-edit"
                onClick={() => {
                  // 修改app中的editId
                  updateEditId(editId !== id ? id : undefined)
                  // 将当前数据的任务名添加到tN中,tN是什么,则文本框中就渲染什么
                  this.setState({
                    tN: todoName,
                  })
                }}
              >
                {editId !== id ? '编辑' : '取消'}
              </button>
            </li>
          )
        }}
      </context.Consumer>
    )
  }
}
